<template>
  <div class="app">
    <div class="right">
      <Collapse></Collapse>
    </div>
    <div class="left">
      <div class="block" style="width:80vw">
        <div class="box">
          <el-table :data="arr" stripe border style="width: 100%">
            <el-table-column label="商品名称" fit>
              <template slot-scope="scope" class="tao">
                <span style="margin-left: 10px">{{ scope.row.goods_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="价格" width="80">
              <template slot-scope="scope" class="tao">
                <span style="margin-left: 10px">{{ scope.row.goods_price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="重量" width="80">
              <template slot-scope="scope" class="tao">
                <span style="margin-left: 10px">{{ scope.row.goods_weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150">
              <template slot-scope="scope" class="tao">
                <span style="margin-left: 10px">{{ scope.row.upd_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot="header" slot-scope="scope">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" @input="chen()" />
              </template>
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>




        <!-- 下面的分页 -->
        <div class="bottom" v-show="flag">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[10, 20, 30]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total=this.zg>
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import Collapse from '../../components/Collapse.vue'
export default {
  components: {
    Collapse
  },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
      query: '',
      pagenum: 1,
      pagesize: 10,
      flag: true,
      arr: [],
      arr2: [],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      search: '',
      zg: 0,
    };
  },
  methods: {
    chen() {
      // console.log(this.search);
      if (this.search.trim() == "") {
        this.arr = this.arr2
        this.flag = true
      } else {
        this.flag = false
        this.arr = this.every.filter(arr => !this.search || arr.goods_name.toLowerCase().includes(this.search.toLowerCase()))
      }
    }
    ,
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val
      let a = {
        query: this.query,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      }
      this.$http.getshangpin(a).then((res) => {
        this.arr = res.data.data.goods
        this.arr2 = res.data.data.goods
      })
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pagenum = val
      // console.log(this.pagenum);
      let a = {
        query: this.query,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      }
      this.$http.getshangpin(a).then((res) => {
        this.arr = res.data.data.goods

      })
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      let shan = row.goods_id
      console.log(shan);
      this.$http.getsanchu(shan).then((res)=>{
        console.log(res);


        let a = {
      query: this.query,
      pagenum: this.pagenum,
      pagesize: this.pagesize
    }
    this.$http.getshangpin(a).then((res) => {
      console.log(res);
      this.arr = res.data.data.goods
      this.arr2 = res.data.data.goods

      this.zg = res.data.data.total
      let b = {
        query: this.query,
        pagenum: this.pagenum,
        pagesize: res.data.data.total
      }
      this.$http.getshangpin(b).then((res) => {
        this.zg = res.data.data.total
        this.every = res.data.data.goods
      })
    })

      })

      
    }
  },

 async created() {
    let a = {
      query: this.query,
      pagenum: this.pagenum,
      pagesize: this.pagesize
    }
    this.$http.getshangpin(a).then((res) => {
      console.log(res);
      this.arr = res.data.data.goods
      this.arr2 = res.data.data.goods

      this.zg = res.data.data.total
      let b = {
        query: this.query,
        pagenum: this.pagenum,
        pagesize: res.data.data.total
      }
      this.$http.getshangpin(b).then((res) => {
        this.zg = res.data.data.total
        this.every = res.data.data.goods
      })
    })
   
  }

}
</script>
<style lang="scss" scoped>
.right {
  height: 1000px;
  float: left;
}

.left {
  float: left;
}
</style>